<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search">
			<view class="searchInput" @click="getSearch">
				<u-icon name="search" color="#909399" :size="26"></u-icon>
				<u-input type="text" clearable border="0" @input="inputKey" :value="tabname" class="inputTxt" placeholder="请输入搜索关键词"></u-input>
			</view>
			<u-transition :show="show" >
				<view class="button">
					<text @click="setSearch">搜索</text>
				</view>
			</u-transition>
		</view>
		<view class="hot">
			<text>热门搜索：</text>
			<view class="hot-btn">
				<u-button type="error" @click="btn('奶粉')" :plain="true" :hairline="true" shape="circle">奶粉</u-button>
				<u-button type="error" @click="btn('面霜')" :plain="true" :hairline="true" shape="circle">面霜</u-button>
				<u-button type="error" @click="btn('图书')" :plain="true" :hairline="true" shape="circle">图书</u-button>
			</view>
		</view>
		<view class="history">
			<text>搜索历史</text>
			<!-- 历史记录按钮 -->
			<view class="his-btn">
				<view v-for="item in hlist">
					<u-button @click="getHis(item)" :plain="true" :hairline="true" shape="circle">{{item}}</u-button>
				</view>
			</view>
			<!-- 清空记录按钮 -->
			<view class="del" v-if="hlist!=''" @click="delSearch">
				<u-icon size="17" name="trash"></u-icon>
				<text>清空历史记录</text>
			</view>
		</view>
		<!-- 加载效果 -->
		<block v-if="status=='loading'">
			<u-loadmore :status="status"></u-loadmore>
		</block>
		<good-list :list="goods"></good-list>
		<u-empty v-show="goods.length==0" mode="search"
				icon="http://cdn.uviewui.com/uview/empty/search.png">
		</u-empty>
	</view>
</template>

<script>
import { apiGoods } from '../../api/mock'
import { mapActions,mapState } from 'vuex'
	export default {
		data() {
			return {
				show:false,
				currentIndex:0,
				goods:[],
				p : 1,		//当前页码
				num : 6,	//每页条数
				tabname : '',
				status : 'loading',
			}
		},
		onLoad() {
			//当页面加载完成后，请求各类数据
			//bug：由于请求返回需要1秒。为了顺利获取数据设置定时器2秒后在执行该函数
			setTimeout(()=>{
				this.getGoods();
			},1100)
		},
		onReachBottom() {
			let msg = this.tabname;
			if(this.tabname.trim() == ''){
				msg = '全部';
			}
			this.status='loading';
			this.p++; //每次触底页码自增
			//根据最近一次的选项卡改变事件中，获取的选项卡下标，提取出来名称
			//获取触底后的页码对应的数据
			apiGoods(this.p, this.num, msg).then((res)=>{
				this.status='loadmore';
				this.goods = [...this.goods,...res];
				console.log(this.goods);
			if(this.goods.length == res.total){
				this.status = 'nomore';
			}
			}).catch((err)=>{
				console.log(err);
			})
		},
		computed:{
			...mapState('search',['hlist'])
		},
		methods: {
			...mapActions('search', ['actionHistory', 'delHistory']),
			btn(e){
				this.inputKey(e)
				this.actionHistory(e)
			},
			// 点击所搜记录搜索
			setSearch(){
				this.actionHistory(this.tabname);
			},
			getSearch(){
				this.show = true;
			},
			// 清空历史记录
			delSearch(){
				this.delHistory();
			},
			// 点击历史记录进行搜索
			getHis(e){
				console.log(e);
				this.tabname =e;
				this.inputKey(e);
			},
			inputKey(e){
				console.log(e);
				this.tabname = e;
				this.getGoods();
			},
			// 商品列表数据
			getGoods(e){
				let msg =this.tabname;
				if(this.tabname.trim()==''){
					msg = '全部';
				}
				this.status='loadmore';
				this.p =1;
				this.goods =[];
				apiGoods(this.p,this.num,msg).then((res)=>{
					console.log(res);
					this.goods = res;
					if(this.goods.length == res.total){
						this.status = 'nomore';
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
		}
	}
</script>

<style lang="scss">
/* 搜索框样式 */
.search{
	padding: 8px 20px;
	display: flex;
	align-items: center;
	.searchInput{
		width: 98%;
		background-color: rgb(234, 234, 234);
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding: 0 8px;
		.inputTxt{
			width: 100%;
			height: 24px;
			border-radius: 20px;
			font-size: 15px;
			color: $u-tips-color;
			margin-left: 4px;
		}
	}
	.button{
		font-size: 14px;
		margin-left: 8px;
	}
}
.hot{
	width: 96%;
	margin: 10px auto;
	display: flex;
	align-items: center;
	font-size: 14px;
	text{
		width: 24%;
	}
	.hot-btn{
		width: 76%;
		display: flex;
		align-items: center;
	}
	.u-button{
		width: 60px;
		height: 25px;
		font-size: 12px;
		margin: 4px;
	}
}
.history{
	width: 96%;
	margin: 18px auto;
	font-size: 14px;
	.his-btn{
		width: 100%;
		margin-top: 8px;
		display: flex;
		flex-wrap: wrap;
		view{
			margin: 4px;
			.u-button{
				width: 100%;
				height: 25px;
				line-height: 25px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 12px;
			}
		}
	}
	.del{
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			margin-left: 2px;
			font-size: 13px;
			color: #848484;
		}
	}
}
</style>
